<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="true"%>
<%@ include file="/skin.jsp"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/jquery.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/language/cn.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/framework.js"></script>
<link href="<c:out value='${sessionScope.libs}'/>/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="<c:out value='${sessionScope.contextPath}'/>/"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!-- 表单验证start -->
<script src="<c:out value='${sessionScope.libs}'/>/js/form/validationRule.js" type="text/javascript"></script>
<script src="<c:out value='${sessionScope.libs}'/>/js/form/validation.js" type="text/javascript"></script>
<!-- 表单验证end -->

<!-- 日期控件start -->
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期控件end -->
</head>
<style>
.detailFormTable{
	border:0;
}
.detailFormTable td{
	border:0;
	height:32px;
}
</style>

<body>
    <div class="box1" panelWidth="800">
    <span class="red">鼠标移入默认提示：</span>
	 <div class="height_15"></div>
		<span title="不超过5字">小尺寸提示</span>
		<div class="height_10"></div>
		<span title="图片过大会撑坏网页结构。">中尺寸提示</span>
		<div class="height_10"></div>
		<span title="图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。">大尺寸提示</span><br />
		<div class="height_10"></div>
		<span title="图片过大<br/>会<span style='color:red;'>撑坏</span>网页结构。">提示信息含html元素</span>
	  
	  <div class="height_15"></div>
	  
	  
	  
	  <span class="red">可动态创建、任意定位和关闭的提示</span>
	  <fieldset> 
     <legend>1、自动模式（箭头方向向上）</legend>
		<span title="不超过5字" keepDefaultStyle="true" class="qTip">小尺寸提示</span>
		<div class="height_10"></div>
		<span title="图片过大会撑坏网页结构。" keepDefaultStyle="true" class="qTip">中尺寸提示</span>
		<div class="height_10"></div>
		<span keepDefaultStyle="true" class="qTip" title="图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。">大尺寸提示</span><br />
		<div class="height_10"></div>
		<span keepDefaultStyle="true" class="qTip" title="图片过大<br/>会<span style='color:red;'>撑坏</span>网页结构。">提示信息含html元素</span>
	  </fieldset>
	  <div class="height_15"></div>
    
    <fieldset> 
     <legend>2、自动模式（箭头方向向左）</legend>
		<span title="不超过5字" keepDefaultStyle="true" class="qTip2">小尺寸提示</span>
		<div class="height_10"></div>
		<span title="图片过大会撑坏网页结构。" keepDefaultStyle="true" class="qTip2">中尺寸提示</span>
		<div class="height_10"></div>
		<span keepDefaultStyle="true" class="qTip2" title="图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。">大尺寸提示</span><br />
		<div class="height_10"></div>
		<span keepDefaultStyle="true" class="qTip2" title="图片过大<br/>会<span style='color:red;'>撑坏</span>网页结构。">提示信息含html元素</span>
	  </fieldset>
	  <div class="height_15"></div>
    
    <fieldset> 
     <legend>3、点击打开</legend>
		<input type="button" value="打开提示" id="qTip3" onclick="showTip('qTip3')"/>
	  </fieldset>
	  <div class="height_15"></div>
	  
	  <fieldset> 
     <legend>4、自定义提示框位置</legend>
		<div id="userInfo" style="padding-left:400px;">用户名：admin</div>
		<br/>
		<input type="button" value="打开提示"  onclick="showTip2()"/>
		
	  </fieldset>
	  <div class="height_15"></div>
	 
	  
	</div>

<script>
		

//以下为第三种tip用到		
$(function () {
    $(".qTip").tip();
    $(".qTip2").tip({ auto:true ,arrowDirection:"left"});
});
function showTip(objId){
	$("#"+objId).tip({showCloseBtn:true,content: "图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height）"});
}
function showTip2(){
	$("#userInfo").tip({showCloseBtn:true,content: "您还未设置昵称，<span class='red'><a>立即设置</a></span>。",distanceX:400});
}
</script>
</body>
</html>